<template>
  <div class="app-container">
    <upload-excel-component :on-success="handleSuccess" :before-upload="beforeUpload" />
  </div>
</template>

<script>
import UploadExcelComponent from '@/components/UploadExcel/index.vue'
import { getImportJsData } from '@/utils/excel'
import { importEmployee } from '@/api/employee'
// 这个插件的唯一作用就是帮助我们把excel文件格式的数据转化成js格式的数据 仅此
// 具体用解析之后的数据干嘛 业务需求 不一定 我们的需求 拿到js数据调用接口
export default {
  name: 'UploadExcel',
  components: { UploadExcelComponent },
  methods: {
    // file:excel文件对象 其中包含有用的文件信息 size
    // 这个函数最后一定要有返回值 如果校验通过返回true 如果不过就返回false
    // 当返回的false的时候会暂停后续的操作 解析行为不会发生
    beforeUpload(file) {
      console.log('上传前', file)
      const isLt1M = file.size / 1024 / 1024 < 1
      if (isLt1M) {
        return true
      }
      this.$message({
        message: 'Please do not upload files larger than 1m in size.',
        type: 'warning'
      })
      return false
    },
    // results和header 都是excel被成功解析之后自动传入的实参
    async handleSuccess({ results, header }) {
      // 1.拿到数据 通过格式化方法 处理成后端要求的数据格式
      // 2.调用真实接口传递数据
      const headerRelation = {
        '姓名': 'username',
        '手机号': 'mobile',
        '入职日期': 'timeOfEntry',
        '工号': 'workNumber',
        '聘用形式': 'formOfEmployment',
        '部门': 'departmentName'
      }
      const formatData = getImportJsData(results, headerRelation)
      await importEmployee(formatData)
      // 返回上一层
      this.$router.back()
    }
  }
}
</script>
